<!DOCTYPE html>
<html>

<head>
  <title></title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="../bootstrap-5.1.3-dist/css/bootstrap.css" rel="stylesheet">
  <script src="../bootstrap-5.1.3-dist/js/bootstrap.bundle.js"></script>
</head>

<body class="container">
  <br>
  <button type="button" class="btn btn-primary" id="liveToastBtn">显示吐司消息</button>
  <div class="toast align-items-center text-white bg-danger border-0" role="alert" aria-live="assertive"
    aria-atomic="true">
    <div class="d-flex">
      <div class="toast-body">
        这里是红色背景的
      </div>
      <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"
        aria-label="Close"></button>
    </div>
    <script>
      document.querySelector("#liveToastBtn").onclick = function () {
        new bootstrap.Toast(document.querySelector('.toast')).show();
      }
    </script>

</body>

</html>